<template>
    <!-- 外部容器 -->
    <div class="box">
        <header>
            <!-- 导航栏，包含一个返回箭头按钮和标题 -->
            <van-nav-bar title="图文咨询" left-arrow @click="onclick" />

            <!-- 标题 -->
            <h3>请选择为谁咨询</h3>

            <!-- 个人信息展示部分 -->
            <div class="p-box">
                <!-- 右侧显示添加按钮 -->
                <div class="p-right">
                    <img src="../../img/add.png" alt="" @click="add">
                </div>

                <!-- 左侧显示当前用户数据 -->
                <div class="p-left" v-if="data">
                    <div><span>{{ data.name }}</span><span>{{ gx }}</span></div>
                    <div><span>{{ sex }}</span><span>{{ data.tel }}</span></div>
                </div>
            </div>
        </header>

        <!-- 主体部分, 目前没有内容 -->
        <main></main>

        <!-- 底部部分 -->
        <footer>
            <p>
                <!-- 同意协议的复选框 -->
                <van-checkbox v-model="checked" class="checkbox">
                    我已阅读并同意
                    <span @click="btn">《风险告知及患者知情同意书》</span>
                </van-checkbox>
            </p>

            <!-- 提交按钮，只有当勾选复选框时才能点击 -->
            <button :disabled="!checked" @click="submitForm">开始问诊</button>
        </footer>
    </div>
</template>

<script setup lang="ts">
import router from '@/router'; // 导入 Vue Router
import { ref } from 'vue'; // 导入 ref，用于创建响应式数据

// 声明响应式变量
const text = ref(''); // 用于保存输入的文本，当前未用到
const checked = ref(false); // 用于记录复选框的选中状态

// 导航栏左侧箭头点击事件，跳转到 /text 页面
const onclick = () => {
    router.push('/text');
}

// 表单提交方法
const submitForm = () => {
    router.push('/chat');
}

// 从 localStorage 获取用户数据，并解析为对象
const data = JSON.parse(localStorage.getItem('data') || '{}'); // 获取存储在 localStorage 中的用户数据，如果没有数据返回一个空对象
console.log(data);

// 获取存储的用户关系、性别等信息
const gx = localStorage.getItem('gx'); // 获取存储的关系
const sex = localStorage.getItem('sex'); // 获取存储的性别

// 跳转到 /forms 页面，用于添加新数据
const add = () => {
    router.push('/forms');
};

// 跳转到 /books 页面，用于查看协议内容
const btn = () => {
    router.push('/books');
}
</script>

<style scoped lang="scss">
/* 外部容器，设置宽高为全屏 */
.box {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    /* 使用 flexbox 布局，垂直排列子元素 */

    header {
        height: 350px;

        h3 {
            margin: 20px 20px;
        }

        img {
            width: 400px;
            height: 150px;
        }

        /* 个人信息区域 */
        .p-box {
            display: flex;
        }

        /* 左侧区域 */
        .p-left {
            width: 40%;
            /* 左侧占 40% */
            height: 135px;
            margin-top: 10px;
            margin-left: 30px;
            border: 3px dotted #ccc;
            /* 点状边框 */
            border-radius: 10px;
            /* 圆角 */
        }

        .p-left>div {
            margin-left: 20px;
            line-height: 60px;
            /* 每一项信息之间的间距 */
        }

        .p-left>div>span {
            margin-left: 20px;
            /* 每个信息项之间的间距 */
        }

        /* 右侧区域 */
        .p-right {
            width: 50%;
        }

        .p-right>img {
            width: 100%;
            margin-left: 20px;
        }

        /* 其他区域设置 */
        .j-box {
            width: 100%;
            height: 880px;
            margin-top: 20px;
            background-color: #F5F5F5;
        }

        .j-div {
            width: 94%;
            height: 150px;
            background-color: #fff;
            margin-left: 3%;
            display: flex;
            position: absolute;
            top: 310px;
        }

        .ben {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #4A95FA;
            color: #fff;
            text-align: center;
            line-height: 80px;
            margin: 40px;
        }

        .spans {
            margin-top: 40px;
            font-size: 30px;
            font-weight: 600;
        }

        .spans>span {
            margin-right: 10px;
        }

        .tel {
            margin-top: 10px;
            font-weight: 400;
            color: #CECECE;
            font-size: 24px;
        }

        .yrz {
            width: 100px;
            height: 40px;
            background-color: #DDF8F2;
            margin-left: 260px;
            color: #00BC8E;
            font-size: 25px;
            font-weight: 600;
            text-align: center;
            line-height: 40px;
            border-radius: 20px 20px 20px 0;
            margin-top: 40px;
        }
    }

    /* 主体部分，允许内容滚动 */
    main {
        flex: 1;
        height: 100%;
        overflow-y: scroll;
        /* 允许垂直滚动 */
    }

    /* 底部部分 */
    footer {
        height: 150px;

        p {
            margin-bottom: 20px;

            .checkbox {
                margin: 10px 50px;

                span {
                    color: #1e6fff;
                    /* 协议文字的颜色 */
                }
            }
        }

        /* 提交按钮样式 */
        button {
            width: 90%;
            height: 80px;
            background-color: #1e6fff;
            margin-left: 37px;
            border: none;
            border-radius: 20px;
            font-size: 24px;
            color: #fff;
            top: 205%;
            z-index: 9;
        }

        /* 禁用状态下按钮的样式 */
        button:disabled {
            background-color: #cccccc;
        }
    }
}
</style>
